/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-23 19:56:54
 * @LastEditTime: 2021-05-06 00:21:49
 * @LastEditors: 邢
 */

import useStore from '@/context/useStore';
import { observer } from 'mobx-react-lite';
import { IHomeList } from '@/utils/interface/Homepage';
import React ,{useEffect}from 'react';
import styles from './articleList.less';
import { timeAgo } from '@/utils/Time';
import {useHistory} from 'umi'
//上拉加载
import InfiniteScroll from 'react-infinite-scroller';

function articleList() {
    let {article} = useStore()
    let history = useHistory()

    useEffect(() => {
      article.getArticleRecommend()
    }, [])
    
    const renderItem =(ID:string)=>{
        history.push(`/index/Details/${ID}`)
    }
    const loadFunc = ()=>{
      article.getArticleRecommend(article.page,article.pageSize,"publish")
      console.log("上拉加载");
    }
    
    return (
        <div className={styles.contentList}>
          <InfiniteScroll
            initialLoad={false}
            pageStart={0}
            loadMore={loadFunc}
            hasMore={(article.page-1)*12 < article.total}
            loader={<div className="loader" key={0}>Loading ...</div>}
          >
            {
              article.articleRecommend.map((item: IHomeList) => {
                return item.cover ? <div key={item.id} 
                className={styles.dl}
                onClick={()=>renderItem(item.id)}
                >
                  <div className={styles.cover}>
                    <img src={item.cover} alt=""/>
                  </div>
                  <div className={styles.content}>
                    <p className={styles.itemp}>{item.title}</p>
                    <p>{item.summary}</p>
                    <p>
                      <span>{item.category && item.category.label + ' · '}</span>

                      <span>{item.views + '次阅读'} </span>
                      <span>{timeAgo(+ new Date(item.createAt)) + '前'}</span>
                    </p>
                  </div>
                </div> : <></>
              })
            }
          </InfiniteScroll>
        </div>
    )
}

export default observer(articleList)